什麼是網站推播通知

推播通知不管對 App 或是網站來說都是一種重新吸引用戶來使用 App 的方法，所以目標是即使網站、App 關閉時也要能在背景接收推播。推播的目的是為了增加 engagement，在行銷領域中 engagement 這個常見的指標就是指用戶在網站或 APP 上的互動程度或者參與度。

網頁推播通知伺服器怎麼去實作

在還沒實際看教學文件前，會發現如果要從零開始依照推播協議的標準開始實作流程是相對複雜:

1. 了解並按照協議去處理相關的內文傳輸格式
2. 了解什麼是 VAPID 金鑰對的概念以及生成方式
3. 數據加解密流程

再來就是觸發推播如果遇到問題，會較困難去排除問題。當然隨著開發者工具的進步會慢慢改善，但還是建議使用現成的套件工具來處理推播，Google 提供的 Firebase 就是不錯的方案，如果還是想要體驗自行實作，也可以使用 web-push 這個套件，來縮短開發時間。

接下來就來示範用 web-push 實作推播伺服器的主要步驟：

1. 透過現有的推播套件產生並配置相關的 VAPID 金鑰對
2. 建立一個 API 接收網頁的訂閱請求
3. 從透過推播套件從後端針對剛剛的訂閱請求推播消息

可以發現如果是使用套件，底層標準的部分就都不需要實作，可以著重在商業邏輯的開發，透過 node.js 最簡單的版本推播實作程式碼如下:

const express = require("express");
const webPush = require("web-push");

const app = express();
const webPush = require("web-push");

// 1. 透過現有的推播套件配置相關的 VAPID 金鑰對
const publicVapidKey = process.env.PUBLIC_VAPID_KEY;
const privateVapidKey = process.env.PRIVATE_VAPID_KEY;
webPush.setVapidDetails(
  "mailto:test@example.com",
  publicVapidKey,
  privateVapidKey
);

// 2. 建立一個 API 接收網頁的訂閱請求
app.post("/subscribe", (req, res) => {
  // 收到訂閱請求
  const subscription = req.body;

  res.status(201).json({});

  const payload = JSON.stringify({
    title: "推播訊息內容",
  });

  // 3. 從透過推播套件從後端針對剛剛的訂閱請求推播消息
  webPush
    .sendNotification(subscription, payload)
    .catch((error) => console.error(error));
});

如果需要進階一點的使用，可以多實作更多相關邏輯:

1. 實作訂閱請求的儲存分類等機制: 把每次訂閱的 const subscription = req.body; 儲存起來，方便後續進階操作

• 舉例來說訂閱時可以多帶參數 /subscribe?device=android&time=morning

2. 實做 API 去處理要推播訊息: 訊息可以針對裝置或是用戶做分眾，或是取消推播等等

這次小編其實在後端也沒有多做複雜的處理，目的是為了測試關閉頁面後仍然可以推播，所以補上了一分鐘後再多送一次的邏輯。

這次的 Demo 連結如下也歡迎各位大大試玩看看:
https://linyencheng-push-notification.herokuapp.com/

setTimeout(() => {
  webPush
    .sendNotification(subscription, payload30)
    .catch((error) => console.error(error));
}, 60 * 1000);